@import "@kestra-io/ui-libs/src/scss/_color-palette.scss";

// Filter Tags
:root {
    #{--ks-tag-background}: $base-gray-50;
    #{--ks-tag-background-active}: $base-gray-100;
}

html.dark{
    #{--ks-tag-background}: $base-gray-700;
    #{--ks-tag-background-active}: $base-gray-500;
    #{--ks-tag-background-hover}: $base-gray-400;
}

// Coloring
$filters-gray-700: var(--bs-gray-700);
$filters-gray-900: var(--bs-gray-900);
$filters-card-color: var(--ks-background-card);
$filters-border-color: var(--ks-border-primary);
$white: $base-white;
$border-color: $base-gray-900;

// Typography
$filters-font-xs: var(--el-font-size-extra-small);

@mixin width-available {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.items {
    .el-tag {
        padding: 0;
        color: var(--ks-tag-content);
        background: var(--ks-tag-background-active);
    }

    .small {
        font-size: $filters-font-xs;
    }
}

.el-popper {
    .empty {
        color: $filters-gray-900
    }

    .scroller {
        &::-webkit-scrollbar {
            height: 5px;
            width: 5px;
        }

        &::-webkit-scrollbar-track {
            background: var(--ks-background-body);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--ks-border-primary);
            border-radius: 5px;
        }
    }
}